<template>
  <view class="uni-container">
	  <uni-forms labelWidth="80" ref="form" v-model="formData" :rules="rules" validateTrigger="bind" @submit="submit">
		  <uni-forms-item name="comment" label="留言内容" required>
		  	<uni-easyinput v-model="formData.comment" :clearable="false" placeholder="请输入留言内容，不可重复" />
		  </uni-forms-item>
		<uni-forms-item name="bbs_img" label="图片列表" >
			<uni-easyinput v-model="formData.bbs_img" :clearable="false" placeholder="请填写图片编号" />
		</uni-forms-item>
		<uni-forms-item name="bbs_name" label="联系人" >
			<uni-easyinput v-model="formData.bbs_name" :clearable="false" placeholder="请填写联系人" />
		</uni-forms-item>
		<uni-forms-item name="bbs_phone" label="联系电话" >
			<uni-easyinput v-model="formData.bbs_phone" :clearable="false" placeholder="请填写联系电话" />
		</uni-forms-item>

      <view class="uni-button-group">
      	<button type="primary" class="uni-button" @click="submitForm" style="width: 100px;">{{$t('common.button.submit')}}</button>
      	<navigator open-type="navigateBack" style="margin-left: 15px;"><button class="uni-button" style="width: 100px;">{{$t('common.button.back')}}</button></navigator>
      </view>
    </uni-forms>
  </view>
</template>
<script>
	import { validator } from '@/js_sdk/validator/uni-id-bbs.js';
	const db = uniCloud.database();
	const dbCmd = db.command;
	const dbCollectionName = 'uni-id-bbs';

	function getValidator(fields) {
		let result = {}
		for (let key in validator) {
			if (fields.includes(key)) {
				result[key] = validator[key]
			}
		}
		return result
	}

	export default {
		data() {
			return {
				formData: {
					"comment": "",
					"bbs_img": "",
					"bbs_name": "",
					"bbs_phone":"",
					"create_date":""
				},
				rules: {
					...getValidator(["bbs_name","bbs_phone","bbs_img","comment","create_data"])
				}
			}
		},
		onLoad(e) {
			const id = e.id
			this.formDataId = id
			this.getDetail(id)
		},
		methods: {
			/**
			 * 触发表单提交
			 */
			submitForm(form) {
				this.$refs.form.submit();
			},

			/**
			 * 表单提交
			 * @param {Object} event 回调参数 Function(callback:{value,errors})
			 */
			submit(event) {
				const {
					value,
					errors
				} = event.detail

				// 表单校验失败页面会提示报错 ，要停止表单提交逻辑
				if (errors) {
					return
				}

				uni.showLoading({
					title: '修改中...',
					mask: true
				})
				// 使用 uni-clientDB 提交数据
				db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {
				    uni.showToast({
				        title: '修改成功'
				    })
				    this.getOpenerEventChannel().emit('refreshData')
				    setTimeout(() => uni.navigateBack(), 500)
				}).catch((err) => {
				    uni.showModal({
				        content: err.message || '请求服务失败',
				        showCancel: false
				    })
				}).finally(() => {
				    uni.hideLoading()
				})
			},

			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true
				})
				db.collection(dbCollectionName).where({
					_id: id
				}).get().then((res) => {
					const data = res.result.data[0]
					if (data) {
						this.formData = data
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			showIconPopup() {
				this.$refs.iconPopup.open()
			}
		}
	}
</script>
<style lang="scss">
</style>